<!--
 * @Author: fisher
 * @Date: 2023-07-31 14:29:00
 * @LastEditTime: 2024-01-10 11:38:07
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\transform\index.vue
-->
<template>
  <div class="template">
    <!-- 面包屑区 -->
    <fks-breadcrumb class="breadcrumb" separator-class="fks-icon-arrow-right">
      <fks-breadcrumb-item>
        <span
          style="cursor: pointer; font-size: 16px; font-weight: bold"
          :class="{ breadcrumbHandle: currentWarehouseId }"
          @click="checkwarehouse"
          >数据治理</span
        >
      </fks-breadcrumb-item>
      <fks-breadcrumb-item v-if="currentWarehouseId">
        <span
          style="cursor: pointer; font-size: 16px; font-weight: bold"
          @click="checkTemplates"
          :class="{ breadcrumbHandle: currentTemplateId }"
          >{{ currentWarehouseName }}</span
        >
      </fks-breadcrumb-item>
      <fks-breadcrumb-item v-if="currentTemplateId">
        <span style="cursor: pointer; font-size: 16px; font-weight: bold">{{
          currentTemplateData.templateName
        }}</span>
      </fks-breadcrumb-item>
    </fks-breadcrumb>
    <!-- 分割线 -->
    <!-- <div class="divider"></div> -->
    <!-- 内容区 -->
    <div class="content">
      <!-- 主仓库tab -->
      <warehouse
        v-if="!currentWarehouseId"
        class="warehouse"
        @toDetails="toDetails"
      ></warehouse>
      <!-- 细节模板tab -->
      <templates
        v-if="currentWarehouseId && !currentTemplateId"
        class="templates"
        :currentWarehouseId="currentWarehouseId"
        @activeTemplate="activeTemplate"
      ></templates>
      <addTask
        v-if="currentTemplateId"
        class="addTask"
        :templateData="currentTemplateData"
      ></addTask>
    </div>
  </div>
</template>

<script>
import warehouse from "./modules/warehouse.vue";
import templates from "./modules/templates.vue";
import addTask from "./modules/addTask.vue";
export default {
  components: { warehouse, templates, addTask },
  data() {
    return {
      currentWarehouseId: "",
      currentWarehouseName: "",
      currentTemplateId: "",
      currentTemplateData: {},
    };
  },
  computed: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    /**
     * @description: 面包屑点选仓库tab，返回仓库列表
     * @return {*}
     */
    checkwarehouse() {
      this.checkTemplates();
      this.currentWarehouseId = "";
      this.currentWarehouseName = "";
    },

    /**
     * @description: 点击面包屑回到模板列表
     * @return {*}
     */
    checkTemplates() {
      this.currentTemplateId = "";
      this.currentTemplateData = {};
    },

    /**
     * @description: 进入仓库，展示详情模板列表
     * @return {*}
     */
    toDetails(val) {
      this.currentWarehouseId = val.id;
      this.currentWarehouseName = val.warehouseName;
    },

    /**
     * @description: 打开模板，准备运行
     * @param { Object } val
     * @return {*}
     */
    activeTemplate(val) {
      this.currentTemplateId = val.id;
      this.currentTemplateData = Object.assign({}, val);
    },
  },
};
</script>

<style lang="scss" scoped>
.template {
  padding: 0 40px;
  user-select: none;
  overflow: hidden;
}

.breadcrumb {
  padding: 47px 0 0 0;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: rgba($color: #000, $alpha: 0.1);
}
.content {
  height: calc(100% - 70px);
}

.warehouse,
.templates,
.addTask {
  width: 100%;
  height: 100%;
}
.breadcrumbHandle {
  color: #1990ff;
}
</style>
